<template>
	<div class="vue-uploader">
		<div v-if="thisImgUrl" class="file-item draggable-item">
			<img :src="thisImgUrl" alt="" ondragstart="return false;">
			<span class="file-remove" @click="remove()">+</span>
		</div>
		<div v-if="!thisImgUrl" class="file-item">
			<div @click="add" class="add"></div>
		</div>
		<input type="file" @change="fileChanged" ref="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png,image/bmp">
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	export default {
		props: ['backImgUrl'],
		data() {
			return {
				thisImgUrl: '',
				files: [], //上传的文件
				//				showUrl: '', //上传成功后服务器图片地址
				//				backImgUrl: '', //上传成功后阿里云img地址
				//阿里云配置信息
				region: 'oss-cn-shanghai',
				bucket: 'fengzhan',
				accessKeySecret: '',
				accessKeyId: ''
			}
		},
		created() {

		},
		mounted() {
//			this.thisImgUrl = this.backImgUrl
//			console.log('this.backImgUrl', this.backImgUrl)
		},
		watch: {
			backImgUrl: function(val) {
				this.thisImgUrl = val
			},
		},
		methods: {
			add() {
				this.$refs.file.click()
			},
			submit() {
				var imgList = []
				var that = this
				that.apiGet('/api/help/oss/sts').then((result) => {
					const client = new OSS.Wrapper({
						region: that.region,
						accessKeyId: result.data.accessKeyId,
						accessKeySecret: result.data.accessKeySecret,
						stsToken: result.data.securityToken,
						bucket: that.bucket
					})
					const fNum = that.files;
					for(var i = 0; i < fNum.length; i++) {
						var f = fNum[i].file
						const Name = f.name
						const suffix = Name.substr(Name.indexOf(".")); //后缀名
						const tsp = this.timestamp(); //时间戳
						const storeAs = tsp + suffix //  路径+时间戳+后缀名
						client.multipartUpload(storeAs, f).then(function(result) {
							//							that.backImgUrl = result.url
							that.thisImgUrl = result.url
							that.$emit('getChildUploadUrl', that.thisImgUrl)
							console.log('that.thisImgUrl', that.thisImgUrl)
						})
					}
				})
			},
			//  时间戳
			timestamp: function() {
				const time = new Date();
				const y = time.getFullYear();
				const m = time.getMonth() + 1;
				const d = time.getDate();
				const h = time.getHours();
				const mm = time.getMinutes();
				const s = time.getSeconds();
				const ms = time.getMilliseconds()
				return "" + y + this.Add0(m) + this.Add0(d) + this.Add0(h) + this.Add0(mm) + this.Add0(s) + this.Add0(ms);
			},
			Add0: function(m) {
				return m < 10 ? '0' + m : m;
			},

			remove() {
				//				this.files.splice(1, 1)
				let that = this;
				that.thisImgUrl = ''
				that.$emit('getChildUploadUrl', that.thisImgUrl)
			},
			fileChanged() {
				const list = this.$refs.file.files
				for(let i = 0; i < list.length; i++) {
					const item = {
						name: list[i].name,
						size: list[i].size,
						file: list[i]
					}
					this.html5Reader(list[i], item)
					this.files.push(item)
				}
				this.submit()
			},
			// 将图片文件转成BASE64格式
			html5Reader(file, item) {
				const reader = new FileReader()
				reader.onload = (e) => {
					this.$set(item, 'showUrl', e.target.result)
				}
				reader.readAsDataURL(file)
			},

		},
		mixins: [http]
	}
</script>
<style scoped>
	.vue-uploader {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}
	
	.file-item {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.vue-uploader .file-item img {
		width: 100%;
		height: 100%;
		border: 1px solid #ececec;
	}
	
	.vue-uploader .file-item .file-remove {
		position: absolute;
		right: 4px;
		display: none;
		top: 4px;
		width: 20px;
		height: 20px;
		font-size: 20px;
		text-align: center;
		color: white;
		cursor: pointer;
		line-height: 20px;
		border-radius: 100%;
		transform: rotate(45deg);
		background: rgba(0, 0, 0, 0.5);
	}
	
	.vue-uploader .file-item:hover .file-remove {
		display: inline;
	}
	
	.vue-uploader .file-item .file-name {
		margin: 0;
		height: 40px;
		word-break: break-all;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.vue-uploader .add {
		width: 150px;
		height: 150px;
		float: left;
		text-align: center;
		line-height: 150px;
		font-size: 30px;
		cursor: pointer;
		background-image: url(../../assets/images/ajia.png); // 这里使用的是我本地图片
		background-size: 90% 90%;
		background-position: center;
		background-repeat: no-repeat;
		border: 1px solid #D2D2D2;
	}
	
	.vue-uploader>input[type="file"] {
		display: none;
	}
	
	.vue-uploader .file-item img.checked {
		box-sizing: border-box;
		border: 5px solid #007ACC;
	}
</style>